<template>
  <div id="NetworkFlowWhole">
    <el-tabs v-model="record.type" type="border-card" @tab-click="handleClick" class="flowTabs">
      <el-tab-pane :label="$t('转发')" name="forward">
        <div class="flowFatherBox">
          <el-button type="success" size='small' @click="dialogVisible()" class="addClick">{{$t('添加')}}</el-button>
        </div>
        <el-table size='mini' ref="multipleTable" :data="flowList" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" :label="$t('策略名称')" align='center'>>
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.name" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="ip_type" :label="$t('IP类型')" align='center'>>
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.ip_type" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="src" align='center' :label="$t('源IP')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.src" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="dst" align='center' :label="$t('目的IP')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.dst" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="service" align='center' :label="$t('服务')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.service" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="app" align='center' :label="$t('应用')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.app" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="time" align='center' :label="$t('时间')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.time" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="user" align='center' :label="$t('用户')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.user" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="bytes" align='center' :label="$t('流量大小')">
            <template slot-scope="scope">
              <tooltip :copyText="bytesChange(scope.row.bytes)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="threshold" align='center' :label="$t('告警阀值')">
            <template slot-scope="scope">
              <tooltip :copyText="szoneFormatter(scope.row)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" :width="lang === 'zh'?'240':'265'">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="dialogVisible(scope.row)" :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
              <el-button type="danger" plain size="mini" @click="deleteData(scope.row)" :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
              <el-button type="primary" plain size="mini" @click="reDialogVisible(scope.row)" :class="'statistics' +(scope.$index+1)">{{$t('重新统计')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane :label="$t('本机')" name="input">
        <div class="flowFatherBox">
          <el-button type="success" size='small' @click="dialogVisible()" class="addClick">{{$t('添加')}}</el-button>
        </div>
        <el-table size='mini' ref="multipleTable" :data="flowList" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" :label="$t('策略名称')" align='center'>
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.name" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="ip_type" :label="$t('IP类型')" align='center'>
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.ip_type" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="src" align='center' :label="$t('源IP')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.src" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="dst" align='center' :label="$t('目的IP')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.dst" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="service" align='center' :label="$t('服务')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.service" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="app" align='center' :label="$t('应用')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.app" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="time" align='center' :label="$t('时间')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.time" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="user" align='center' :label="$t('用户')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.user" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="bytes" align='center' :label="$t('流量大小')">
            <template slot-scope="scope">
              <tooltip :copyText="bytesChange(scope.row.bytes)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="threshold" align='center' :label="$t('告警阀值')">
            <template slot-scope="scope">
              <tooltip :copyText="szoneFormatter(scope.row)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" :width="lang === 'zh'?'240':'265'">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="dialogVisible(scope.row)" :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
              <el-button type="danger" plain size="mini" @click="deleteData(scope.row)" :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
              <el-button type="primary" plain size="mini" @click="reDialogVisible(scope.row)" :class="'statistics' +(scope.$index+1)">{{$t('重新统计')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane :label="$t('本机外出')" name="output">
        <div class="flowFatherBox">
          <el-button type="success" size='small' @click="dialogVisible()" class="addClick">{{$t('添加')}}</el-button>
        </div>
        <el-table size='mini' ref="multipleTable" :data="flowList" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" :label="$t('策略名称')" align='center'>
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.name" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="ip_type" :label="$t('IP类型')" align='center'>
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.ip_type" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="src" align='center' :label="$t('源IP')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.src" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="dst" align='center' :label="$t('目的IP')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.dst" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="service" align='center' :label="$t('服务')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.service" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="app" align='center' :label="$t('应用')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.app" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="time" align='center' :label="$t('时间')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.time" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="user" align='center' :label="$t('用户')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.user" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="bytes" align='center' :label="$t('流量大小')">
            <template slot-scope="scope">
              <tooltip :copyText="bytesChange(scope.row.bytes)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="threshold" align='center' :label="$t('告警阀值')">
            <template slot-scope="scope">
              <tooltip :copyText="szoneFormatter(scope.row)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" :width="lang === 'zh'?'240':'265'">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="dialogVisible(scope.row)" :class="'edit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
              <el-button type="danger" plain size="mini" @click="deleteData(scope.row)" :class="'del' +(scope.$index+1)">{{$t('删除')}}</el-button>
              <el-button type="primary" plain size="mini" @click="reDialogVisible(scope.row)" :class="'statistics' +(scope.$index+1)">{{$t('重新统计')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane :label="$t('转发柱状统计图')" name="fourth">
        <flow-bar v-if="flowBarFlag" :barList='barList'></flow-bar>
      </el-tab-pane>
    </el-tabs>

    <flow-dialog v-if="flowDialogVisible" ref="refFlowDialogVisible"></flow-dialog>
  </div>
</template>
<script>
import { getArray, delInfo, reChear, getForwarding } from '@/api/network/flow'
import FlowDialog from './components/FlowDialog'
import FlowBar from './components/FlowBar.vue'
import { Loading } from 'element-ui'
// import 'view-design/dist/styles/iview.css'
export default {
  name: 'Flow',
  components: {
    FlowDialog,
    FlowBar
  },
  data () {
    return {
      flowDialogVisible: false,
      flowBarFlag: false,
      flowList: [],
      barList: { flow_data: {}, time_list: [] },
      lang: this.$i18n.locale,
      loadingInstance: null,
      record: {
        type: 'forward', // 类型（input | output | forward）
        page: 1,
        limit: 20
      },
      total: 0
    }
  },
  mounted () {
    this.listDataLoading()
    this.timer = setInterval(() => {
      this.listData()
    }, 5000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      this.timer = null
    }
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.record.page = 1
      this.listDataLoading()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listDataLoading()
    },
    handleClick () {
      if (this.record.type === 'fourth') {
        getForwarding().then(res => {
          if (res.status === 0) {
            this.barList = res.info
            this.flowBarFlag = true
          }
        })
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      } else {
        this.flowBarFlag = false
        this.listDataLoading()
        if (!this.timer) {
          this.timer = setInterval(() => {
            this.listData()
          }, 5000)
        }
      }
    },
    // 列表
    listDataLoading () {
      if (document.getElementById('main-height')) {
        this.loadingInstance = Loading.service({
          target: '#main-height',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      getArray(this.record).then(res => {
        if (res.status === 0) {
          this.flowList = res.info
          this.total = res.count
          if (this.loadingInstance) {
            this.loadingInstance.close()
            this.loadingInstance = null
          }
        }
      }).catch(e => {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      })
    },
    // 列表
    listData () {
      getArray(this.record).then(res => {
        if (res.status === 0) {
          this.flowList = res.info
          this.total = res.count
        }
      }).catch(e => {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      })
    },
    // 添加按钮表单
    dialogVisible (data) {
      this.flowDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refFlowDialogVisible.init(data, this.record.type)
      })
    },
    deleteData (data) {
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delInfo({ type: this.record.type, id: data.id }).then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('删除成功'),
              type: 'success'
            })
            this.listData()
          }
        })
      })
    },
    reDialogVisible (data) {
      reChear({ type: this.record.type, id: data.id }).then(res => {
        if (res.status === 0) {
          this.listData()
          this.$message({
            message: this.$t('重新计数成功！'),
            type: 'success'
          })
        }
      })
    },
    szoneFormatter (row) {
      if (row.threshold === 0) {
        return this.$t('未设置告警')
      } else if (row.threshold >= 1048576) {
        return (row.threshold / 1024 / 1024).toFixed(2) + 'M'
      } else if (row.threshold >= 1024) {
        return (row.threshold / 1024).toFixed(2) + 'KB'
      } else {
        return row.threshold.toFixed(2) + 'B'
      }
    },
    bytesChange (bytes) {
      if (bytes === 0) {
        return ''
      } else if (bytes >= (1024 * 1024 * 1024)) {
        return (bytes / 1024 / 1024 / 1024).toFixed(2) + 'G'
      } else if (bytes >= 1048576) {
        return (bytes / 1024 / 1024).toFixed(2) + 'M'
      } else if (bytes >= 1024) {
        return (bytes / 1024).toFixed(2) + 'KB'
      } else {
        return bytes.toFixed(2) + 'B'
      }
    }
  }
}
</script>
<style lang="less">
.flowTabs {
  .el-tabs__nav {
    margin-left: 20px;
  }
}
</style>
